<template>
	<view>
		<view v-if="show" class="cu-list menu-avatar card-menu margin-top-xl margin-bottom-xl padding-bottom-xl shadow-lg radius">

			<view class="cu-form-group">
				<view class="text-gray title">客服昵称</view>
				<input placeholder="请输入客服昵称" v-model="form.nickname" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="text-gray title">客服账号</view>
				<input v-model="form.kf_account" placeholder="请输入客服账号"></input>
			</view>
			<view class="cu-form-group">
				<view class="text-gray title">客服密码</view>
				<input v-model="form.password" placeholder="请输入客服密码"></input>
			</view>
			<!-- <view class="cu-bar bg-white ">
				<view class="action text-grey">
					图片
				</view>
				<view class="action">
					1张
				</view>
			</view>
			<view class="cu-form-group border-bottom border-light">
				<view class="grid col-4 grid-square flex-sub" style="height: 150rpx;">
					<view class="bg-img" v-if="form.cover">
						<image @tap="ViewImage" :src="form.cover" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="!form.cover">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view> -->
			<view class="mt-5 flex align-center px-3">
				<view style="flex:3;">
					<button class='cu-btn  round bg-gradual-blue padding  text-center shadow-blur py-4 font-lg block' @click="confirm">提交</button>
				</view>
				<view class="ml-1" style="flex:2;">
					<button class='cu-btn  round bg-orange padding  text-center shadow-blur py-4 font-lg block' @click="show=!show">取消</button>
				</view>
			</view>
		</view>
		<view class="cu-list menu card-menu  margin-top-xl margin-bottom-xl shadow-lg">
			<view v-if="list.length===0">暂无客服{{list.length}}</view>
			<view class="cu-item " v-else  v-for="(item,index) in list" :key="index">
				<view class="content flex align-center">
					<view v-if="item.kf_headimgurl" class="cu-avatar round  margin-right" :style="[{ backgroundImage:'url(' + (item.kf_headimgurl) + ')' }]">
						<view class="cu-tag badge" :class="item.gender==0?'cuIcon-female bg-pink':'cuIcon-male bg-blue'"></view>
					</view>
					<text class="text-grey">{{item.kf_account}}-{{item.kf_nick}}-{{item.kf_id}}</text>
				</view>
				<view class="flex align-center">
					<view class="flex cu-tag round bg-orange">
						删除
					</view>
					<view class="flex cu-tag round bg-olive">
						修改
					</view>
				</view>
			</view>
			
		</view>
		<view class="padding-xl">
			<button class="mt-2 block bg-green  lg  cu-btn round" @click="openModel('add')">新增客服</button>
			<button class="mt-2 block bg-orange  lg  cu-btn round" @click="openModel('edit')">修改客服</button>
			<button class="mt-2 block bg-orange lg  cu-btn round" @click="setAvatar">修改头像</button>
			<button class="mt-2 block bg-orange  lg cu-btn round" @click="deleted">删除客服</button>
			<button class="mt-2 block bg-orange  lg cu-btn round" @click="sendMsg">发送客服消息</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				show: false,
				form: {
					"kf_account": "",
					"nickname": "",
					"password": ""
				},
				options: ''
			}
		},
		onLoad() {
			// 获取客服列表
			this.getList()
		},
		methods: {
			getList(){
				uniCloud.callFunction({
					name: 'wxAction',
					data: {
						action: 'customer',
						params: this.form,
						options: 'list'
					}
				}).then(res=>{
					console.log(res)
				})
			},
			confirm() {
				uniCloud.callFunction({
					name: 'wxAction',
					data: {
						action: 'customer',
						params: this.form,
						options: this.options
					}
				}).then(res=>{
					console.log(res)
				})
				this.options=''
				this.show=false
			},
			openModel(type) {
				this.options = type
				this.show = true

			}
		}
	}
</script>

<style>

</style>
